<script setup>
import { ref, onMounted } from 'vue'
import request from '@/api/request.js'

const articles = ref([])
onMounted(() => {
  request.get('/article').then(res => {
    // 需要将获取到的数据赋值给 articles
          articles.value = res.data  // 根据实际返回结构调整

  })
})
const del = (id) => {
  request.delete('/article', {params: {id: id} }).then(res => {
    console.log(res)
  })
}

</script>

<template>
<table>
<tr>
  <th>ID</th>
  <th>Title</th>
  <th>Comment</th>
  <th>Date</th>
</tr>
<tr v-for="article in articles" :key="article.id">
  <td>{{ article.id }}</td>
  <td>{{ article.title }}</td>
  <td>{{ article.comment }}</td>
  <td>{{ article.date }}</td>
  <td><button @click="del(article.id)">删除</button></td>
</tr>
</table>
<hr>

</template>

<style scoped></style>